<template>
  <div class="outlineManage" v-tab>
    提纲
    <button @click="prevHandler" :disabled="num <= 1"><</button>
    {{ num }}
    <button @click="nextHandler" :disabled="num >= total">></button>
    <div class="container">
      <ul class="list" ref="list">
        <li v-for="item in total" :key="item">{{ item }}
            <div @click="nextHandler"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "outlineManage",
  data() {
    return {
      num: 1,
      total: 6,
    };
  },
  directives: {
  },
  mounted() {},
  methods: {
    prevHandler() {
      console.log(
        this.$refs.list.firstChild,
        this.$refs.list.firstChild.clientWidth
      );
      if (this.num > 1) {
        this.$refs.list.style.transform = `translatex(-${
          (this.num - 2) * this.$refs.list.firstChild.clientWidth
        }px)`;
        this.$refs.list.style.transition = "all .5s";
        this.num--;
      }
    },
    nextHandler() {
      console.log(this.$refs.list, this.$refs.list.firstChild.clientWidth);
      if (this.num < this.total) {
        this.$refs.list.style.transform = `translatex(-${
          this.num * this.$refs.list.firstChild.clientWidth
        }px)`;
        this.$refs.list.style.transition = "all .5s";
        this.num++;
      }
    },
    chooseHandler(){
        
    }
  },
};
</script>

<style lang="scss" scoped>
.outlineManage {
  .container {
    width: 100%;
    overflow: hidden;
    .list {
      display: flex;

      > li {
        min-width: 500px;
        width: 500px;
        height: 700px;
        // border: 1px solid red;
        &:nth-child(even) {
          background: red;
        }
        &:nth-child(odd) {
          background: skyblue;
        }
        &>div{
            width: 100%;
            height: 200px;
        }
      }
    }
  }
}
</style>